<template>
  <div>
    <div class="buildingbox" v-if="this.currentNode.modelType == 'community'">
        <el-popover
            v-for="(item, index) in building" :key="index"
            placement="bottom-start"
            title="基础信息"
            width="200"
            trigger="hover"
            :content="`楼层数：${item.layerNum}`">
            <div class="building"  slot="reference">
               {{ item.floorName }}
            </div>
        </el-popover>
    </div>
    <div class="floor"  v-if="this.currentNode.modelType == 'floor'">
        <aside>
            <div class="buildingbox">
                <div class="building" @click="selectunit(item,index)" :class="{ 'on': index == unitIndex}"  v-for="(item, index) in floorlist" :key="index">
                    {{ item.unitName }}
                </div>
            </div>
        </aside>
        <div style="flex:1">
            <div>
                颜色说明： <el-button :type="item.listClass" size="mini" v-for="(item, index) in statusOptions" :key="index">{{ item.dictLabel }}</el-button>
            </div>
            <div class="floorbox"  v-for="(item, index) in houselist" :key="index" >
                <div>第{{ index+1}}层</div>
                <div class="buildingbox">
                    <el-popover
                        v-for="(el, i) in item" :key="i"
                        placement="right-start"
                        title="基础信息"
                        width="200"
                        trigger="hover"
                        >
                        <div>
                            <p> {{ el.communityName }}</p>
                            <p>{{ el.floorName }}</p>
                            <p>{{ el.roomName}}</p>
                            <p>{{ el.unitName }}</p>
                            <p>{{ el.customName }}</p>
                            <p>{{ dict.label.floor_state[el.state]  }}</p>
                        </div>
                        <div class="building" :class="bgcolor(el)" slot="reference">
                        {{ el.roomNum }}
                        </div>
                    </el-popover>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { listFloor } from "@/api/property/floor";
import { listUnit } from "@/api/property/unit";
import { listRoom } from "@/api/property/room";

export default {
    dicts:[ 'floor_state' ],
    data () {
        return {
            building:[],
            floorlist:[],
            houselist:[],
            unitId:null,
            unitIndex:0,
            statusOptions:[]
        }
    },
    props: {
      currentNode: {
        type: Object,
        default:()=>{}
      },
    },
    created () {
        this.getDicts("housing_status").then(response => {
            this.statusOptions = response.data;
        });
        this.query();
    },
    methods:{
        bgcolor(value){
            switch (value.statusCd) {
                case '1001':
                    return { 'danger':true }
                    break;
                case '1002':
                    return { 'success':true }
                    break;
                case '1003':
                    return { 'warning':true }
                    break;
                default:
                    return { 'danger':true }
                    break;
            }
        },
        query(){
            if(this.currentNode && this.currentNode?.id){
                switch (this.currentNode.modelType) {
                    case "community":
                        listFloor({ communityId: this.currentNode.id}).then(res=>{
                            let { code , msg, rows, total } = res;
                            this.building = rows
                        })
                        break;
                    case "floor":
                        listUnit({ "floorId": this.currentNode.id}).then(res=>{
                            let { code , msg, rows, total } = res;
                            this.floorlist = rows
                        })
                        if(this.currentNode.children && this.currentNode.children.length>0){
                            this.unitId = this.currentNode.children[0].id;
                           this.onListRoom()
                        }

                        break;
                    default:
                        break;
                }
            }
        },
        onListRoom(){
            listRoom({unitId:this.unitId }).then(res=>{
                let { code , msg, rows, total } = res;
                let houselist = [];
                let commonfloor = [];
                let layerNum = null;
                for (let index = 0; index < rows.length; index++) {
                    const element = rows[index];
                    if(element.layerNum != layerNum && index != 0){
                        layerNum = element.layerNum;
                        if(commonfloor.length>0){
                            houselist.push(commonfloor);
                        }
                        commonfloor =[];
                        commonfloor.push(element)
                    }else{
                        if(index == 0){
                            layerNum = element.layerNum;
                        }
                        commonfloor.push(element)
                        if(index ==  rows.length -1){
                            houselist.push(commonfloor);
                        }
                    }
                }
                this.houselist = houselist;

            })
        },
        selectunit(value,index){
            this.unitIndex = index;
            this.unitId = value.id;
            this.onListRoom()

        }
    },
    watch: {
      currentNode(v) {
        this.query();
      }
    },
}
</script>

<style scoped lang="scss">
.buildingbox{
    display: flex;
    justify-content: left;
    flex-flow: wrap;
    .building{
        cursor: pointer;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        margin: 5px;
        background-color: rgb(245, 232, 220);
        color: #fff;
        &.on{
            background-color: cornflowerblue;
        }
    }
}
.floor{
    display: flex;
    aside{
        margin: 0 5px 0 0;
        padding: 10px;
        .buildingbox{
            display: flex;
            flex-direction: column;
        }
    }
}
.floorbox{
    margin-left: 5px;
    background-color: #EEF1F6;
    margin-top: 10px;
    padding: 10px;
    width: 100%;
}
.danger{ background-color: #FF4949 !important;}
.success{ background-color: #13CE66 !important;}
.warning{ background-color: yellow !important;}
</style>
